<form [formGroup]="emailProviderForm" (ngSubmit)="createEmailProvider()" class="space-y-6 p-6">

  <div class="flex items-center gap-4">
    <label class="w-40 text-right font-medium">Provider Name:</label>
    <input type="text" pInputText formControlName="name" placeholder="Enter provider name..." class="w-full md:w-80"/>
  </div>
  @if (emailProviderForm.get('name')?.invalid && (emailProviderForm.get('name')?.dirty || emailProviderForm.get('name')?.touched)) {
    <small class="text-red-500 pl-44">
      Provider name is required.
    </small>
  }

  <div class="flex items-center gap-4">
    <label class="w-40 text-right font-medium">Host:</label>
    <input type="text" pInputText formControlName="host" placeholder="Enter host..." class="w-full md:w-80"/>
  </div>
  @if (emailProviderForm.get('host')?.invalid && (emailProviderForm.get('host')?.dirty || emailProviderForm.get('host')?.touched)) {
    <small class="text-red-500 pl-44">
      Host is required.
    </small>
  }

  <div class="flex items-center gap-4">
    <label class="w-40 text-right font-medium">Port:</label>
    <input type="number" pInputText formControlName="port" placeholder="Enter port..." class="w-full md:w-80"/>
  </div>
  @if (emailProviderForm.get('port')?.invalid && (emailProviderForm.get('port')?.dirty || emailProviderForm.get('port')?.touched)) {
    <small class="text-red-500 pl-44">
      Port is required and must be a number.
    </small>
  }

  <div class="flex items-center gap-4">
    <label class="w-40 text-right font-medium">Username:</label>
    <input type="text" pInputText formControlName="username" placeholder="Enter username..." class="w-full md:w-80"/>
  </div>

  <div class="flex items-center gap-4">
    <label class="w-40 text-right font-medium">Password:</label>
    <input type="password" pInputText formControlName="password" placeholder="Enter password..." class="w-full md:w-80"/>
  </div>

  <div class="flex items-center gap-4">
    <label class="w-40 text-right font-medium">From Address:</label>
    <input type="text" pInputText formControlName="fromAddress" placeholder="Enter from address... " class="w-full md:w-80"/>
  </div>

  <div class="flex items-center gap-4">
    <label class="w-40 text-right font-medium">Auth:</label>
    <p-checkbox formControlName="auth" [binary]="true"></p-checkbox>
  </div>

  <div class="flex items-center gap-4">
    <label class="w-40 text-right font-medium">StartTLS:</label>
    <p-checkbox formControlName="startTls" [binary]="true"></p-checkbox>
  </div>

  <div class="flex justify-end">
    <p-button label="Create Email Provider" [disabled]="emailProviderForm.invalid" type="submit">
    </p-button>
  </div>

</form>
